import React, { useState, useEffect } from 'react';

const DynamicBackground = ({ imageUrl }) => {
    const [canvasUrl, setCanvasUrl] = useState('');

    useEffect(() => {
        // 加载图片
        const img = new Image();
        img.crossOrigin = 'Anonymous'; // 防止跨域资源共享问题
        img.src = imageUrl;

        img.onload = () => {
            // 创建canvas元素来绘制图片
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = img.naturalWidth;
            canvas.height = img.naturalHeight;
            ctx.drawImage(img, 0, 0);

            // 将canvas转换为图片URL
            const url = canvas.toDataURL('image/png');
            setCanvasUrl(url); // 更新状态，应用背景
        };


    }, [imageUrl]);

    // 设置背景样式
    const backgroundStyle = {
        backgroundImage: `url(${canvasUrl || ''})`, // 使用backgroundImage而不是background
        filter: 'blur(10px)', // 设置模糊度
        backgroundSize: 'cover', // 背景图片覆盖整个元素
        height: '30vh', // 视口高度的20%
        width: '100vw', // 视口宽度的80%
        position: 'fixed', // 固定定位
        top: '50%', // 垂直方向上居中
        left: '50%', // 水平方向上居中
        transform: 'translate(-50%, -166%)', // 使用CSS的transform属性进行居中定位
        zIndex: -1, // 确保这个元素在页面内容的下方
        opacity: 0.5, // 降低透明度，便于调试（根据需要调整或移除）
    };


    return <div style={backgroundStyle} />;
};

export default DynamicBackground;